<template>
	<!-- <view>
		<image class="bg" src="/static/login/log_bg.png" mode="scaleToFill"></image>
		 -->
	<view class="content" :style="{'background':kbackgroundColor}" style="min-height: 100vh">
		<hx-navbar title="转赠" :back="true" :fixed="false" :color="knavTitleColor" barPlaceholder="hidden"
			transparent="auto"></hx-navbar>
		<view class="container">
			<view class="sale_input">
				<view class="sale_title">转赠账号</view>
				<input type="number" @focus="clean" @input="checkinput" v-model="user_phone" class="inputer"
					placeholder="输入转赠人手机号" placeholder-class="sale_holder">
				<view class="sale_user" v-if="give_user">
					受赠人：

					<image class="avatar" v-if="give_user.avatar && give_user.avatar.includes('http')"
						:src="give_user.avatar" @error="avatarDefaultImage()" mode="aspectFit"></image>
					<image class="avatar" v-if="!give_user.avatar" src="../../static/logo.png" mode="aspectFit">
					</image>
					<image class="avatar" v-if="(give_user.avatar && !give_user.avatar.includes('http'))"
						src="../../static/logo.png" mode="aspectFit"></image>

					<!-- 	
					<image :src="give_user.avatar" mode="aspectFill" class="sale_head"></image> -->
					{{give_user.nickname}}
				</view>
			</view>
			<view class="collection_info">
				<image :src="item.image" mode="aspectFit" class="collect_image"></image>
				<view class="collect_info">
					<view class="collect_title">链上信息</view>
					<view class="collect_item">
						<view class="keys">所属专辑</view>
						<view class="value">{{category.name}}</view>
					</view>
					<view class="collect_item">
						<view class="keys">合约地址</view>
						<view class="value webkit flex1">{{item.contract}}</view>
					</view>
				</view>
			</view>
			<view class="sale_tips">
				<view class="sale_title">转赠须知</view>
				<view class="sale_content">
					<view class="">
						请转增之前，仔细核对转增对象的地址或者电话号，谨防上当受骗，如有被骗，平台方概不负责。
					</view>
					<!-- <text>{{give_desc}}</text> -->
				</view>
			</view>
			<view class="bottom_boxx" :style="{background:ktabbarBgColor}">
				<view class="buy_btn" @tap="give_before()" :style="{background:kbuttonBgColor}">立即转赠</view>
			</view>
		</view>
		<paypass ref="passbox" @confirm="set_done"></paypass>
	</view>
</template>
<script>
	import paypass from '@/components/pay_pass/pay_pass.vue'
	export default {
		components: {
			paypass
		},
		data() {
			return {
				info: {},
				id: '',
				user_phone: '',
				give_user: false,
				type: 2,
				item: {},
				mobiles: '',
				category:{}
			}
		},
		onLoad(options) {
			this.id = options.id;
			if (!this.id) {
				this.$common.errorToShow('商品失效')
				uni.navigateBack()
				return;
			}
			let userToken = this.$db.get("userToken");
			let data = {
				sn: this.id
			}
			if (userToken) {
				data.token = userToken;
			}
			// this.$api.getCollectionDetails(this.id, res => {
			// 	console.log("res--00",res)
			// 	if (res.status) {
			// 		this.info = res.data;
			// 	}
			// })
			this.$api.getCollectionDetails(this.id, res => {
				if (res.status) {
					this.info = res.data;
					this.$api.getGoodsDetails(res.data.iid, res => {
						this.item = res.data
						this.author = this.item.author
						this.category = this.item.category
						console.log("this.item ---", this.item)
					})
				}
			})
		},
		computed: {
			give_desc() {
				return this.$store.state.config.give_desc;
			},
		},
		methods: {
			set_done: function(pass) {
				if (this.type == 1) {
					this.sale(pass)
				}
				if (this.type == 2) {
					this.give(pass)
				}
			},
			clean: function() {

				this.give_user = false;
				this.user_phone = ''
			},
			see_user: function() {
				let data = {
					phone: this.user_phone
				}
				this.$api.getUserInfo(this.user_phone, res => {
					console.log("res-", res)
					if (res.status) {
						this.give_user = res.data;
					} else {
						this.$common.errorToShow(res.msg)
						this.give_user=false
					}
				})


			},
			checkinput: function(e) {

				this.mobiles = e.detail.value;
				// var mobile= e.detail.value;
				//(mobile.length == 11)
				if (this.mobiles.length == 11) {
					this.see_user()
				}
			},
			set_done: function(pass) {
				if (this.type == 1) {
					this.sale(pass)
				}
				if (this.type == 2) {
					this.give(pass)
				}
			},
			give_before: function() {
				this.type = 2

				if (this.give_user) {

					if (/^1[3456789]{1}\d{9}$/gi.test(this.mobiles)) {
						uni.showModal({
							content: '确定要给' + this.give_user.nickname + '转赠吗？',
							success: (r) => {
								if (r.confirm) {
									this.$api.checkSecondPassword({}, res => {
										if(res.status){
											let data = res.data
											if (data.secondPassword) {
												this.$refs.passbox.open();
											} else {
												this.$common.errorToShow('请设置交易密码', () => {
													uni.navigateTo({
														url: '/pages/user/settings/pay_pass/pay_pass'
													})
												});
											}
										}else{
											this.$common.errorToShow('网络异常');
										}
									})
								}
							}
						});

					} else {
						this.$common.errorToShow("请输入正确手机号")
					}


				} else {
					this.$common.errorToShow('请输入有效用户')
				}
			},
			give: function(pass) {
				if (this.give_user) {

					let data = {
						nftId: this.info.nftId,
						phone: this.user_phone,
						secondPassword: pass
					}
					this.$api.giveItem(data, res => {
						if (res.status) {
							this.$common.successToShow('转赠成功', () => {
								uni.reLaunch({
									url: '/pages/user/give_record/give_record'
								})
							})
							// this.$common.successToShow("转赠成功")
							// 	uni.reLaunch({
							// 		url: '/pages/user/give_record/give_record'
							// 	})

						} else {
							this.$common.errorToShow(res.message)
						}
					})

				} else {
					this.$common.errorToShow('请输入有效用户')
				}
			},
		}
	}
</script>
<style lang="scss">
	page {
		background-color: #F3F2F7;
	}

	.container {
		padding: 20rpx 25rpx;
	}

	.bottom_boxx {
		width: 100%;
		height: 160rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 11;

		.buy_btn {
			width: 650rpx;
			height: 80rpx;
			border-radius: 100rpx;
			background: $btn-bg;
			text-align: center;
			line-height: 80rpx;
			font-size: 32rpx;
			color: #333333;
			font-weight: 400;
		}
	}

	.sale_tips {
		width: 100%;
		background-color: $bg-box;
		padding: 28rpx 26rpx;
		border-radius: 20rpx;
		margin-top: 20rpx;

		.sale_title {
			font-size: 32rpx;
			color: #141519;
			font-weight: bold;
		}

		.sale_content {
			font-size: 26rpx;
			color: #999;
			line-height: 46rpx;
			margin-top: 20rpx;
		}
	}

	.collection_info {
		width: 100%;
		display: flex;
		padding: 40rpx 30rpx;
		border-radius: 20rpx;
		background-color: $bg-box;
		margin-top: 20rpx;

		.collect_image {
			width: 191rpx;
			height: 191rpx;
			border-radius: 10rpx;
			margin-right: 20rpx;
		}

		.collect_info {
			flex: 1;
			padding-top: 25rpx;

			.collect_title {
				font-size: 32rpx;
				color: #000;
				font-weight: bold;
				padding-bottom: 10rpx;
				border-bottom: 1rpx solid #D9D9D9;
			}

			.collect_item {
				padding-top: 10rpx;
				display: flex;
				align-items: center;

				.keys {
					width: 135rpx;
					font-size: 24rpx;
					color: #666;
				}

				.value {
					font-size: 24rpx;
					color: #141519;
					font-weight: bold;
				}
			}
		}
	}

	.sale_input {
		width: 100%;
		background: $bg-box;
		padding: 30rpx;
		border-radius: 20rpx;

		.sale_user {
			display: flex;
			align-items: center;
			font-size: 32rpx;
			color: #333;

			.sale_head {
				width: 46rpx;
				height: 46rpx;
				margin: 0 25rpx;
				margin-right: 10rpx;
				border-radius: 50%;
			}
		}

		.sale_title {
			font-size: 32rpx;
			color: #999;
			margin-bottom: 20rpx;
		}

		.inputer {
			font-size: 52rpx;
			color: #141519;
			font-weight: bold;
		}

		.sale_holder {
			font-size: 52rpx;
			color: #999;
		}
	}

	.avatar {
		width: 80rpx;
		height: 80rpx;
		// display: block;
		border-radius: 50%;
	}
</style>